<template>
  <div class="news">
    <Myhead :list="list" @click.native="changeTab"></Myhead>
    <Mycard
      v-for="item in cardList"
      :key="item.id"
      :item="item"
      @click.native="gotodetail(item.id)"
    ></Mycard>
  </div>
</template>

<script>
import { getNewsNav } from "../../utils/api";
import { getNewsCard } from "../../utils/api";
import Myhead from "../../components/yueke/myhead.vue";
import Mycard from "@/components/news/Mycard";
export default {
  data() {
    return {
      list: [],
      cardList: [],
    };
  },
  mounted() {
    getNewsNav().then((res) => {
      console.log(res.data);
      this.list = res.data;
      this.list.unshift({
        id: 0,
        name: "全部",
        parent_id: 0,
      });
    });
    getNewsCard().then((res) => {
      console.log(res.data.list);
      this.cardList = res.data.list;
    });
  },
  methods: {
    changeTab() {
      getNewsCard().then((res) => {
        console.log(res.data.list);
        this.cardList = res.data.list;
      });
    },
    gotodetail(id) {
      this.$router.push({path:'/NewDetail',query:{id:id}});
    },
  },
  components: {
    Myhead,
    Mycard,
  },
};
</script>

<style lang='scss'>
</style>
